<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/9/27
  Time: 9:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>课程管理</title>
    <%@include file="../../common/header.jsp"%>
    <%@include file="../../common/ruoyi.jsp"%>
    <script>
        var pager;
        var layer;
        $(function () {
            layui.use('layer',function () {
                layer=layui.layer;
            });
        });
        function queryAll(pageNo){
          $.ajax({
              type:"post",
              url:"${pageContext.request.contextPath}/course.action?method=queryAll&pageNo="+pageNo,
              data:$("#course-form").serialize(),
              dataType:"json",
              success:function (msg) {
                  $("#tb_cou1").empty();
                  var list=msg.data;
                  for (var i = 0; i < list.length; i++) {
                      var name;
                      if (list[i].state==1){
                          name="禁用";
                      }else {
                          name="启用";
                      }
                     var tr="<tr>" +
                             "<td>"+list[i].type_name+"</td>"+
                             "<td>"+list[i].course_name+"</td>"+
                             "<td>"+list[i].user_name+"</td>"+
                             "<td>"+name+"</td>"+
                             "<td>"+list[i].charge+"</td>"+
                             "<td>"+list[i].hour+"</td>"+
                             "<td>"+$("#op").html().replace('{cid}',list[i].course_id ).replace('{sid}',list[i].course_id).replace('{stid}',list[i].course_id).replace('{ssid}',list[i].course_id)+"</td>"+
                         "</tr>";
                      $("#tb_cou1").append(tr);
                  }
                  pager = msg;
                  $("#sp").html("当前页:"+pager.pageNo+"/总页数:"+pager.pages);
                  $("#pageNo1").val(pager.pagerNo);
                  $("#pagerNo1").attr("max",pager.pages);
              },error:function(e){
                  alert(e);
              }
          });
        }

        $(function () {
            $("#btnGo").click(function () {
                //获取要跳到的页码
                var pageNo=$("#pageNo1").val();
                if (pageNo>pager.pages) pageNo=pager.pages;
                queryAll(pageNo);
            });
        });

        //添加前初始化模态框表单
        function sub_add(){
            $("#form1")[0].reset();
        }



        /**
         * 课程录入及修改
         */
        function add(){
            $.ajax({
                url:"${pageContext.request.contextPath}/course.action?method=add",
                type:"post",
                data:$("#form1").serialize(),
                dataType:"json",
                success:function(data){
                    queryAll(1);
                    layer.msg("课程修改或添加成功");
                },
                error:function (x,s,e) {
                    alert("错误："+s+e);
                }
            });

        }


        //修改前的查询
        function queryOne(course_id){
            $.ajax({
                url:"${pageContext.request.contextPath}/course.action?method=queryOne&course_id="+course_id,
                type:"post",
                dataType:"json",
                success:function (data) {
                    $("#course_id").val(data.course_id);
                    $("#course_name").val(data.course_name);
                    $("#type_id2").val(data.type_id);
                    $("#charge").val(data.charge);
                    $("#hour").val(data.hour);
                },error:function (e) {
                    alert(e);
                }
            });
        }

        function course_delete(course_id){
            $.ajax({
                url:"${pageContext.request.contextPath}/course.action?method=delete&course_id="+course_id,
                type:"post",
                dataType:"json",
                success:function(data){
                    layer.msg("删除成功");
                    queryAll(1);
                },
                error:function (xhr,s,e) {
                    alert("错误："+xhr+s+e);
                }
            });
        }

        function queryType(){
            $.ajax({
                url:"${pageContext.request.contextPath}/course.action?method=queryType",
                type:"post",
                dataType:"json",
                success:function (data) {
                    $.each(data,function (i,e) {
                        $("#type_id1").append("<option value="+e.id+">"+e.type_name+"</option>");
                        $("#type_id2").append("<option value="+e.id+">"+e.type_name+"</option>");
                    })
                },
                error:function (xhr,s,e) {
                    alert("错误："+xhr+s+e);
                }
            });
        }

        function queryTeacher(){
            $.ajax({
                url:"${pageContext.request.contextPath}/course.action?method=queryTeacher",
                type:"post",
                dataType:"json",
                success:function (data) {
                    $.each(data,function (i,e) {
                        $("#user_id1").append("<option value="+e.user_id+">"+e.user_name+"</option>");
                        $("#user_id2").append("<option value="+e.user_id+">"+e.user_name+"</option>");
                    })
                },
                error:function (xhr,s,e) {
                    alert("错误："+xhr+s+e);
                }
            });
        }

         function updateState(course_id,state){
            $.ajax({
                url:"${pageContext.request.contextPath}/course.action?method=updateState&course_id="+course_id+"&state="+state,
                type:"post",
                dataType:"json",
                success:function (data) {
                    layer.msg("状态修改成功");
                    queryAll(1);
                },
                error:function (xhr,s,e) {
                    alert("错误："+xhr+s+e);
                }
            });
         }

        $(function () {
            queryType();
            queryTeacher();
            queryAll(1);
        });


    </script>



</head>
<body>

<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="course-form">
                <div class="select-list">
                    <ul>
                        <li>
                            课程名称：<input type="text" name="course_name"/>
                        </li>
                        <li>
                            <label>费用: </label>
                            <input type="text"  id="minCharge" placeholder="最低费用" name="minCharge"/>
                            <span>-</span>
                            <input type="text" id="maxCharge" placeholder="最高费用" name="maxCharge"/>
                        </li>
                        <li>
                            课程状态：<select name="status">
                            <option value="">所有</option>
                            <option value="0">启用</option>
                            <option value="1">禁用</option>
                        </select>
                        </li>
                        <li>
                            课程类型：<select name="type_id" id="type_id1">
                            <option value="">所有</option>
                        </select>
                        <li>
                            任课老师：<select name="user_id" id="user_id1">
                            <option value="">所有</option>
                        </select>
                        </li>
                        <li>
                            <label>课时: </label>
                            <input type="text"  id="minHour" placeholder="最低课时" name="minHour"/>
                            <span>-</span>
                            <input type="text" id="maxHour" placeholder="最高课时" name="maxHour"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="queryAll(1)"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick=""><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
            <div class="col-sm-12 select-table table-striped">
                <input type="button" id="btn" class="btn btn-success" value="课程录入" onclick="sub_add()" data-toggle="modal" data-target="#myModal">
                <table class="table table-bordered table-hover">
                    <caption>课程信息</caption>
                    <thead>
                    <tr>
                        <td>类型</td>
                        <td>课程名称</td>
                        <td>任课老师</td>
                        <td>课程状态</td>
                        <td>费用</td>
                        <td>课时</td>
                        <td>操作</td>
                    </tr>
                    </thead>
                    <tbody id="tb_cou1">

                    </tbody>
                </table>


                <div id="page">
                    <ul class="pagination">
                        <li><span id="sp"></span></li>
                        <li><a href="javascript:void(0)" onclick="queryAll(1)">首页</a></li>
                        <li><a href="javascript:void(0)" onclick="queryAll(pager.prev)">上页</a></li>
                        <li><a href="javascript:void(0)" onclick="queryAll(pager.next)">下页</a></li>
                        <li><a href="javascript:void(0)" onclick="queryAll(pager.last)">尾页</a></li>
                        <li class="input-group">
                            <input type="number" value="" id="pageNo1" min="1"  step="1"/>
                            <input type="button" value="go" id="btnGo"/>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="op">
    <div class="hidden-sm hidden-xs action-buttons">
        <a class="green" href="#" onclick="queryOne({cid})" data-toggle="modal" data-target="#myModal">
            <i class="ace-icon fa fa-pencil "></i>修改
        </a>
        <a class="red" href="#" onclick="course_delete({sid})">
            <i class="ace-icon fa fa-trash-o "></i>删除
        </a>
        <select name="state" >
            <option value="0" onclick="updateState({stid},0)">启用</option>
            <option value="1" onclick="updateState({ssid},1)">禁用</option>
        </select>
    </div>
</script>



<!--模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="z-index: 5000">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">课程</h4>
            </div>
            <div class="modal-body">
                <%--课程录入--%>
                <form role="form" id="form1" action="dept.action" >
                    <div class="form-group">
                        <%--编号--%>
                        <input type="hidden" class="form-control" id="course_id" name="course_id" />
                        <label for="course_name">课程名称</label><input type="text" class="form-control " id="course_name" name="course_name" />
                    </div>
                    <div class="form-group">
                        课程类型：<select name="type_id" id="type_id2">
                    </select>
                        任课老师：<select name="user_id" id="user_id2">
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="charge">价格</label><input type="text" class="form-control" id="charge" name="charge" />
                    </div>
                    <div class="form-group">
                        <label for="hour">课时</label><input type="text" class="form-control" id="hour" name="hour" />
                    </div>
                </form>
                <%--课程录入--%>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="btnSubmit" onclick="add()" data-toggle="modal" data-target="#myModal">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


</body>
</html>
